<template>
    <div class="add_page">
        <div class="container">
            <div class="page_title">用户信息  <span class="span_button" @click="openEdit()">打开编辑功能</span></div> 
            <div class="info_container">
                <div class="cellList">
                   <div class="cell">
                      <div class="title">用户姓名: </div>
                      <div class="input_div"><input :readonly="edit ? false : true" :value="dataInfo.name" name="name" @input="inputValueChange($event)" type="text"></div>
                    </div>
                    <div class="cell">
                        <div class="title">微信号: </div>
                        <div class="input_div"><input :readonly="edit ? false : true" :value="dataInfo.wechat_id" name="wechat_id" @input="inputValueChange($event)" type="text"></div>
                    </div>
                    <div class="cell">
                        <div class="title">联系方式: </div>
                        <div class="input_div"><input :readonly="edit ? false : true" :value="dataInfo.mobile" name="mobile" @input="inputValueChange($event)" type="text"></div>
                    </div>
                    <div class="cell">
                        <div class="title">身份证号: </div>
                        <div class="input_div"><input :readonly="edit ? false : true" :value="dataInfo.identity_card" name="identity_card" @input="inputValueChange($event)" type="text"></div>
                    </div>
                    <div class="cell" v-if="inviterShow">
                        <div class="title">邀请人电话号码: </div>
                        <div class="input_div"><input :readonly="edit ? false : true" :value="dataInfo.inviter_mobile || ''" name="inviter_mobile" @input="inputValueChange($event)" maxlength="11" type="tel"></div>
                    </div>
                    <div class="cell">
                        <div class="title">月卡购买日期: </div>
                        <div class="input_div special_input"><vue-datepicker-local :disabled="edit ? false : true" @input="submit" name="card_start_date" style="width: 100%;" v-model="time" format="YYYY-MM-DD"></vue-datepicker-local></div>
                    </div>
                    <div class="cell">
                        <div class="title">月卡结束日期: </div>
                        <div class="input_div"><input disabled :value="dataInfo.card_end_date || ''" name="card_end_date" @input="inputValueChange($event)" type="text"></div>
                    </div>
                    <div class="cell">
                        <div class="title">月卡用户: </div>
                        <div class="input_div div_flex">
                          <div><input name="card_type" type="radio" value="1" :disabled="edit ? false : true" :checked="dataInfo.card_type == 1" @change="inputValueChange($event)" />是</div> 
                          <div><input name="card_type" type="radio" value="2" :disabled="edit ? false : true" :checked="dataInfo.card_type == 2" @change="inputValueChange($event)" />否</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="title">是否开通: </div>
                        <div class="input_div div_flex">
                          <div><input name="month_card_state" type="radio" value="1" :disabled="edit ? false : true" :checked="dataInfo.month_card_state == 1 " @change="inputValueChange($event)" />是</div> 
                          <div><input name="month_card_state" type="radio" value="2" :disabled="edit ? false : true" :checked="dataInfo.month_card_state == 2 || dataInfo.month_card_state == 3" @change="inputValueChange($event)" />否</div>
                        </div>
                    </div>
                    <div class="commit" @click="commitPost()">
                        提交
                    </div>
                </div>
                <div class="order_cellList" v-if="dataInfo.user_number > 0">
                  <div class="order_title">该用户邀请的人：<span>共{{dataInfo.user_number}}人</span></div>
                  <div class="user_underling_list">
                    <table border="1" cellspacing="0" cellpadding="0">
                      <thead>
                        <tr class="active">
                          <th class="table-6">姓名</th>
                          <th class="table-6">联系方式</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item, index) in dataInfo.user_underling" :key="index.underling_mobile" :class="index%2 == 0 ? 'color1' : 'color2' ">
                          <td>{{item.underling_name}}</td>
                          <td>{{item.underling_mobile}}</td>  
                        </tr>
                      </tbody>
                    </table>
                      
                  </div>
                </div>
            </div>
           
        </div>
    </div>
</template>

<script>
import getUserInfo from "../../services/editUserInfo/getUserInfo";
import editInfo from "../../services/editUserInfo/editInfo";
import VueDatepickerLocal from "../vue-datepicker-local";
import Format from "../../uitl/format.js";
var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
export default {
  data() {
    return {
      time: "",
      dataInfo: {},
      inviterShow: false,
      edit: false,
      tempDate: "",
      params: {
        action: "getBacktrackInfo",
        id: "",
        type: 1
      },
      postParams: {
        name: "",
        wechat_id: "",
        mobile: "",
        card_type: "",
        month_card_state: "",
        card_start_date: "",
        inviter_mobile: "",
        identity_card: "",
        id: ""
      }
    };
  },
  components: {
    VueDatepickerLocal
  },
  created() {
    // let _params = this.params;
    let query = this.$route.query;
    this.params.id = query.id;
    this.postParams.id = query.id;
    this.getUserInfo(this.params);

    // console.log('~~~~~', time2);
  },
  mounted() {},
  methods: {
    inputValueChange(e) {
      let value = e.target.value;
      let type = e.target.name;
      if (type == "card_type") {
        if (value == 2) {
          this.postParams.card_start_date = "";
          this.time = "";
        }
      }
      this.postParams[type] = value;
      this.dataInfo[type] = value;
      console.log("value", name, value, this.dataInfo);
    },

    openEdit() {
      this.edit = true;
    },

    submit: function(value) {
      let newDate = value.Format("yyyy-MM-dd");
      this.postParams.card_start_date = newDate;
      let timer = Date.parse(value);
      let endTimer = timer + 3456000000;
      console.log("@@@@@@@@", this.dataInfo);
      this.dataInfo.card_end_date = new Date(endTimer).Format("yyyy-MM-dd");
    },

    // 提交修改
    commitPost() {
      let regCard = this.postParams.identity_card;
      console.log("asdasdadasdasdas", reg);
      if (!this.postParams.name) {
        alert("别把用户姓名忘了哦～");
        return false;
      } else if (!this.postParams.wechat_id) {
        alert("别把用户的微信号忘了哦～");
        return false;
      } else if (!this.postParams.mobile) {
        alert("别把用户的手机号忘了哦～");
        return false;
      } else if (!this.postParams.identity_card) {
        alert("别把用户的身份证号忘了哦～");
        return false;
      } else if (!reg.test(regCard)) {
        alert("请输入有效的身份证号码～");
        return false;
      } else {
        editInfo(false, this.postParams).then(
          res => {
            alert("修改成功");
            this.$router.push({ name: "SearchPage" });
            console.log("res", res.data);
          },
          erro => {
            console.log("erro", erro);
          }
        );
      }
    },

    // 获取用户信息
    getUserInfo(params) {
      const vm = this;
      getUserInfo(false, params).then(
        res => {
          vm.dataInfo = res.data;
          vm.tempDate = res.data.card_start_date; // 用来在提交时候做比对的临时字段
          vm.time = res.data.card_start_date; // 修改默认日期
          vm.postParams = {
            name: res.data.name,
            wechat_id: res.data.wechat_id,
            mobile: res.data.mobile,
            card_type: res.data.card_type,
            month_card_state: res.data.month_card_state,
            card_start_date: res.data.card_start_date,
            identity_card: res.data.identity_card,
            inviter_mobile: res.data.inviter_mobile,
            id: res.data.id
          };
          console.log(
            "0987654",
            !res.data.inviter_mobile && res.data.card_start_date != ""
          );
          if (!res.data.inviter_mobile && res.data.card_start_date != "") {
            vm.inviterShow = false;
          } else {
            vm.inviterShow = true;
          }
          // vm.time = new Date(res.data.)
          console.log("res", res.data);
        },
        erro => {
          console.log("erro", erro);
        }
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add_page {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("../../assets/img1.jpg") no-repeat;
  background-size: 100%;
  .container {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    background: #f7f7f7;
    overflow: hidden;
    .info_container {
      display: flex;
      padding-right: 30px;
      .cellList {
        width: 50%;
        .cell {
          margin-left: 30px;
          margin-top: 30px;
          display: flex;
          .title {
            width: 130px;
          }
          .special_input {
            width: 225px !important;
          }
          .input_div {
            margin-left: 10px;
            width: 200px;
            input {
              outline: none;
              width: 100%;
              padding: 5px 10px;
              background-color: #fff !important;
            }
            // input:-webkit-autofill {
            //   background-color: none;
            // }
          }
          .div_flex {
            display: flex;
            div {
              input {
                width: 25px;
              }
              flex: 1;
              display: flex;
            }
          }
        }
        .commit {
          margin-left: 30px;
          margin-top: 30px;
          width: 100px;
          cursor: pointer;
          text-align: center;
          color: #fff;
          border-radius: 10px;
          background: #5ebfb8;
          padding: 5px 10px;
        }
      }
      .order_cellList {
        flex: 1;
        // border: 1px solid red;
        table {
          width: 100%;
        }
        td{
          padding: 5px 20px;
          
        }
        .table-6 {
          width: 50%;
        }
        .color1 {
          background: #fff;
        }
        .color2 {
          background: #e1e1e1;
        }
        .order_title {
          margin-top: 20px;
          span {
            margin-left: 20px;
            color: red;
          }
        }
      }
    }
  }
  .page_title {
    font-size: 24px;
    margin-left: 30px;
    margin-top: 30px;
    border-bottom: 1px #e1e1e1 solid;
    .span_button {
      font-size: 12px;
      background: #5ebfb8;
      color: #fff;
      border-radius: 5px;
      padding: 5px 10px;
      transform: translateY(-5px);
      display: inline-block;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
